@props(['type' => 'default', 'transparent' => false])

@php
    $baseClasses = 'navbar shadow-lg';
    $classes = match($type) {
        'landing' => $baseClasses . ' bg-base-100 sticky top-0 z-50',
        'auth' => $baseClasses . ' bg-base-100/80 backdrop-blur-sm sticky top-0 z-50',
        'dashboard' => $baseClasses . ' bg-base-100',
        'demo' => $baseClasses . ' bg-primary text-primary-content',
        default => $baseClasses . ' bg-base-100'
    };
    
    if ($transparent) {
        $classes .= ' bg-base-100/80 backdrop-blur-sm';
    }
@endphp

<div class="{{ $classes }}">
    <div class="navbar-start">
        <!-- 移动端菜单 -->
        <div class="dropdown">
            <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </div>
            <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
                {{ $mobileMenu ?? '' }}
            </ul>
        </div>
        
        <!-- Logo -->
        <a href="{{ url('/') }}" class="btn btn-ghost text-xl font-bold">
            <img src="{{ asset('image/logo.png') }}" alt="InfluWatchDog" class="h-8 w-auto">
            <span class="ml-2">InfluWatchDog</span>
        </a>
    </div>
    
    <!-- 桌面端菜单 -->
    <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
            {{ $desktopMenu ?? '' }}
        </ul>
    </div>
    
    <!-- 右侧内容 -->
    <div class="navbar-end">
        {{ $rightContent ?? '' }}
    </div>
</div> 